

.side-panel{
    position: relative;
    z-index: 1000;
    width: 100%;
    transition-property: min-height,max-height,opacity;
    transition-duration: 0.3s;
    transition-delay: 0s;
    max-height: 0px;
    transition-timing-function: ease;
    height: 0px;
    min-height: 0px;
    overflow: hidden;
    opacity:0
}
.self{
    transition-property: min-height,max-height,opacity;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: ease;
    height: 0px;
    min-height: 300px;
    opacity:1;
    height: auto;
}
#panel-activer{
    display:none;
}
#panel-activer:checked + .panel-parent .side-panel {
    min-height: 500px;
    max-height: 1000px;
    height: auto;
    opacity:1
}
#panel-activer:checked + .panel-parent .self {
    /*display: none;*/
    opacity:0;
    min-height: 0px;
    max-height: 0px;
    overflow: hidden;

}
.machine-flat-monitoring .weather-title{
  margin: 20px 0px;
  color: #d3d3d5 ;
}
.machine-flat-monitoring .weather-content{
    margin: 0px 20px 0px 0px;
    color: #d3d3d5 ;

}
.machine-flat-monitoring  .weather-div{
  margin-top: 20px;
}
.machine-flat-monitoring .transform{
    transform:scale(0.4);
    -ms-transform:scale(0.4); 	/* IE 9 */
    -moz-transform:scale(0.4); 	/* Firefox */
    -webkit-transform:scale(0.4); /* Safari 和 Chrome */
    -o-transform:scale(0.4);
}
.machine-flat-monitoring .color-block{

    width :32px;
    /*border: solid black 1px;*/
    height:32px;
    display: inline-block;
    float:left;
}
.machine-flat-monitoring .color-block-title{

    margin: 0px 5px;
    display: inline-block;
    float: left;
    height: 32px;
    line-height: 32px;
}

/*.machine-flat-monitoring .distribution-Occupy{*/
    /*background-color: #37a2da;*/
/*}*/
/*.machine-flat-monitoring .distribution-unOccupy{*/
    /*background-color: #67e0e3;*/
/*}*/
/*.machine-flat-monitoring .unDistribution{*/
    /*background-color: #ffdb5c;*/
/*}*/


